<template>
  <div>
    <u-cell-group :border="false">
      <required-parameter />
      <cus-cell
        title="字数限制"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('maxlength')
        "
      >
        <div>
          <u-number-box
            v-model="editConfigCom.attribute.maxlength"
            :min="0"
          ></u-number-box>
        </div>
      </cus-cell>

      <block
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('type')
        "
      >
        <cus-cell title="输入类型" :border="false"> </cus-cell>
        <div class="cell__body">
          <u-radio-group
            v-model="editConfigCom.attribute.type"
            placement="column"
            @change="onChangeRule"
          >
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.label"
              :name="item.name"
            >
            </u-radio>
          </u-radio-group>
        </div>
      </block>

      <!--      <block-->
      <!--        v-if="-->
      <!--          editConfigCom.attribute &&-->
      <!--          editConfigCom.attribute.hasOwnProperty('rule')-->
      <!--        "-->
      <!--      >-->
      <!--        <cus-cell title="输入验证" :border="false"> </cus-cell>-->
      <!--        <div class="cell__body">-->
      <!--          <u-radio-group-->
      <!--            v-model="editConfigCom.attribute.rule"-->
      <!--            placement="column"-->
      <!--            @change="onChangeRule"-->
      <!--          >-->
      <!--            <u-radio-->
      <!--              :customStyle="{ marginBottom: '8px' }"-->
      <!--              v-for="(item, index) in ruleOptions"-->
      <!--              :key="index"-->
      <!--              :label="item.label"-->
      <!--              :name="item.name"-->
      <!--            >-->
      <!--            </u-radio>-->
      <!--          </u-radio-group>-->
      <!--        </div>-->
      <!--      </block>-->
      <cus-cell
        title="验证失败提示语"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('ruleText')
        "
      >
        <div>
          <u--input
            placeholder="请输入提示语"
            border="surround"
            v-model="editConfigCom.attribute.ruleText"
          ></u--input>
        </div>
      </cus-cell>
      <!--      <cus-cell-->
      <!--        title="显示清除标志"-->
      <!--        :border="false"-->
      <!--        v-if="-->
      <!--          editConfigCom.attribute &&-->
      <!--          editConfigCom.attribute.hasOwnProperty('clearable')-->
      <!--        "-->
      <!--      >-->
      <!--        <div>-->
      <!--          <u-switch v-model="editConfigCom.attribute.clearable" size="20" />-->
      <!--        </div>-->
      <!--      </cus-cell>-->
    </u-cell-group>
  </div>
</template>

<script>
import requiredParameter from "@/components/cusFormConfig/requiredParameter";
export default {
  components: { requiredParameter },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      typeOptions: [
        {
          label: "文本",
          name: "text",
        },
        {
          label: "电话",
          name: "mobile",
        },
        {
          label: "密码",
          name: "password",
        },
        {
          label: "邮箱",
          name: "email",
        },
      ],
      ruleOptions: [
        {
          label: "无",
          name: null,
        },
        {
          label: "电话",
          name: "mobile",
        },
        {
          label: "邮箱",
          name: "email",
        },
      ],
    };
  },
  created() {},
  methods: {
    onChangeRule(e) {
      if (e === "mobile" || e === "email") {
        this.editConfigCom.attribute.rule = e;
      } else {
        this.editConfigCom.attribute.rule = "";
      }
      console.log(e);
    },
  },
};
</script>

<style scoped lang="scss">
.cell__body {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
  background-color: #F9F9F9;
  border-radius: 8px;
}
</style>
